<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Combine Data Sets with &#x60;merge&#x60;</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Combine Data Sets with &#x60;merge&#x60;</h1>

    
        <a href="#toc" class="jump">Jump to Table of Contents</a>
    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
<p>Combine data sets and create shallow copies of objects with <code>merge</code></p>
</div>

<div class="example">
    <style type="text/css">
    #demo pre {
        font-size: .9em;
        padding: 1em;
        background-color: #fff;
        margin: 1ex;
    }
    #demo #demo_result { background-color: #ffe; }

    #demo h3 {
        margin: 1em 0 0 1ex;
    }
</style>

<div id="demo">
<pre>set1 = { foo : "foo" };</pre>
<pre>set2 = { foo : "BAR", bar : "bar"  };</pre>
<pre>set3 = { foo : "FOO", baz : "BAZ" };</pre>

<input type="button" name="demo_btn1" id="demo_btn1" value="Merge"/>
<input type="button" name="demo_btn2" id="demo_btn2" value="Copy"/>
<h3 id="result">result</h3>
<pre id="demo_result">click Merge or Copy</pre>
<script type="text/javascript">

YUI().use('node', 'dump', function(Y) {

        var set1 = { foo : "foo" };
    var set2 = { foo : "BAR", bar : "bar" };
    var set3 = { foo : "FOO", baz : "BAZ" };
    var result = Y.one('#demo_result');

    var doMerge = function () {

        Y.log('set1 = ' + Y.dump(set1));
        Y.log('set2 = ' + Y.dump(set2));
        Y.log('set3 = ' + Y.dump(set3));

        Y.log('Merging set1, set2, and set3');
        var merged = Y.merge(set1, set2, set3);
        Y.log('merged = ' + Y.dump(merged));

        result.setContent('<p>' + Y.dump(merged) + '</p>');
    };

    Y.on('click', doMerge, '#demo_btn1');


        var doCopy = function () {

        // Create set4 with an object property 'obj'
        var set4 = {
            obj: {}
        };

        // Create a shallow copy of set4
        var copy = Y.merge(set4);

        // Add a property to the copy inside of the 'obj' property
        copy.obj.addedToCopy = true;

        Y.log('After modifying the copy: ');

        // The result object is not the same as the original, but
        var msg = ('"copy" should NOT be equal to the "original" (false expected): ' + (copy === set4));

        // objects in the result object will reference the same object in
        // the input object.
        msg += '<br />copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): ' + 
                (copy.obj.addedToCopy === set4.obj.addedToCopy);

        Y.log(msg);
        result.setContent('<p>' + msg + '</p>');
    };

    Y.on('click', doCopy, '#demo_btn2');



});


</script>
</div>


</div>


<h3 id="using-merge">Using <code>merge</code></h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;dump&#x27;, function(Y) {
    &#x2F;&#x2F; This method is in the core of the library, so we don&#x27;t have to use() any
    &#x2F;&#x2F; additional modules to access it.  However, this example requires &#x27;node&#x27; and &#x27;dump&#x27;.</pre>


<h3 id="merging-hash-tables">Merging hash tables</h3>
<p>When the "Merge" button is clicked, we merge three object literals in the form
of hash tables.  Note the key values in later parameters override those in
previous parameters.</p>

<pre class="code prettyprint">var set1 = { foo : &quot;foo&quot; };
var set2 = { foo : &quot;BAR&quot;, bar : &quot;bar&quot; };
var set3 = { foo : &quot;FOO&quot;, baz : &quot;BAZ&quot; };
var result = Y.one(&#x27;#demo_result&#x27;);

var doMerge = function () {

    Y.log(&#x27;set1 = &#x27; + Y.dump(set1));
    Y.log(&#x27;set2 = &#x27; + Y.dump(set2));
    Y.log(&#x27;set3 = &#x27; + Y.dump(set3));

    Y.log(&#x27;Merging set1, set2, and set3&#x27;);
    var merged = Y.merge(set1, set2, set3);
    Y.log(&#x27;merged = &#x27; + Y.dump(merged));

    result.setContent(&#x27;&lt;p&gt;&#x27; + Y.dump(merged) + &#x27;&lt;&#x2F;p&gt;&#x27;);
};

Y.on(&#x27;click&#x27;, doMerge, &#x27;#demo_btn1&#x27;);</pre>


<h3 id="creating-shallow-copies">Creating Shallow Copies</h3>
<p>When the "Copy" button is clicked, we create use merge on a single
object in order to create a shallow clone.  The code illustrates the
fact that object properties of the result object are shared with
the input object.</p>

<pre class="code prettyprint">var doCopy = function () {

    &#x2F;&#x2F; Create set4 with an object property &#x27;obj&#x27;
    var set4 = {
        obj: {}
    };

    &#x2F;&#x2F; Create a shallow copy of set4
    var copy = Y.merge(set4);

    &#x2F;&#x2F; Add a property to the copy inside of the &#x27;obj&#x27; property
    copy.obj.addedToCopy = true;

    Y.log(&#x27;After modifying the copy: &#x27;);

    &#x2F;&#x2F; The result object is not the same as the original, but
    var msg = (&#x27;&quot;copy&quot; should NOT be equal to the &quot;original&quot; (false expected): &#x27; + (copy === set4));

    &#x2F;&#x2F; objects in the result object will reference the same object in
    &#x2F;&#x2F; the input object.
    msg += &#x27;&lt;br &#x2F;&gt;copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): &#x27; + 
            (copy.obj.addedToCopy === set4.obj.addedToCopy);

    Y.log(msg);
    result.setContent(&#x27;&lt;p&gt;&#x27; + msg + &#x27;&lt;&#x2F;p&gt;&#x27;);
};

Y.on(&#x27;click&#x27;, doCopy, &#x27;#demo_btn2&#x27;);</pre>


<p>See the <code>clone</code> method to create deep copies of objects.</p>

<h3 id="full-javascript-source">Full Javascript Source</h3>

<pre class="code prettyprint">YUI().use(&#x27;node&#x27;, &#x27;dump&#x27;, function(Y) {

        var set1 = { foo : &quot;foo&quot; };
    var set2 = { foo : &quot;BAR&quot;, bar : &quot;bar&quot; };
    var set3 = { foo : &quot;FOO&quot;, baz : &quot;BAZ&quot; };
    var result = Y.one(&#x27;#demo_result&#x27;);

    var doMerge = function () {

        Y.log(&#x27;set1 = &#x27; + Y.dump(set1));
        Y.log(&#x27;set2 = &#x27; + Y.dump(set2));
        Y.log(&#x27;set3 = &#x27; + Y.dump(set3));

        Y.log(&#x27;Merging set1, set2, and set3&#x27;);
        var merged = Y.merge(set1, set2, set3);
        Y.log(&#x27;merged = &#x27; + Y.dump(merged));

        result.setContent(&#x27;&lt;p&gt;&#x27; + Y.dump(merged) + &#x27;&lt;&#x2F;p&gt;&#x27;);
    };

    Y.on(&#x27;click&#x27;, doMerge, &#x27;#demo_btn1&#x27;);


        var doCopy = function () {

        &#x2F;&#x2F; Create set4 with an object property &#x27;obj&#x27;
        var set4 = {
            obj: {}
        };

        &#x2F;&#x2F; Create a shallow copy of set4
        var copy = Y.merge(set4);

        &#x2F;&#x2F; Add a property to the copy inside of the &#x27;obj&#x27; property
        copy.obj.addedToCopy = true;

        Y.log(&#x27;After modifying the copy: &#x27;);

        &#x2F;&#x2F; The result object is not the same as the original, but
        var msg = (&#x27;&quot;copy&quot; should NOT be equal to the &quot;original&quot; (false expected): &#x27; + (copy === set4));

        &#x2F;&#x2F; objects in the result object will reference the same object in
        &#x2F;&#x2F; the input object.
        msg += &#x27;&lt;br &#x2F;&gt;copy.obj.addedToCopy should be equal to original.obj.addedToCopy (true expected): &#x27; + 
                (copy.obj.addedToCopy === set4.obj.addedToCopy);

        Y.log(msg);
        result.setContent(&#x27;&lt;p&gt;&#x27; + msg + &#x27;&lt;&#x2F;p&gt;&#x27;);
    };

    Y.on(&#x27;click&#x27;, doCopy, &#x27;#demo_btn2&#x27;);



});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            
                <div id="toc" class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Table of Contents</h2>
                    </div>

                    <div class="bd">
                        <ul class="toc">
<li>
<a href="#result">result</a>
</li>
<li>
<a href="#using-merge">Using <code>merge</code></a>
</li>
<li>
<a href="#merging-hash-tables">Merging hash tables</a>
</li>
<li>
<a href="#creating-shallow-copies">Creating Shallow Copies</a>
</li>
<li>
<a href="#full-javascript-source">Full Javascript Source</a>
</li>
</ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Setting up a YUI Instance">
                                        <a href="yui-core.html">YUI Core</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with multiple YUI instances.">
                                        <a href="yui-multi.html">Multiple Instances</a>
                                    </li>
                                
                            
                                
                                    <li data-description="On-demand loading of YUI and non-YUI assets">
                                        <a href="yui-loader-ext.html">YUI Loader - Dynamically Adding YUI and External Modules</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create Class Hierarchies with &#x60;extend&#x60;">
                                        <a href="yui-extend.html">Create Class Hierarchies with &#x60;extend&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating a composition-based class structure using &#x60;augment&#x60;">
                                        <a href="yui-augment.html">Compose Classes of Objects with &#x60;augment&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Add behaviors to objects or static classes with &#x60;mix&#x60;">
                                        <a href="yui-mix.html">Add Behaviors to Objects with &#x60;mix&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Combine data sets and create shallow copies of objects with &#x60;merge&#x60;">
                                        <a href="yui-merge.html">Combine Data Sets with &#x60;merge&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Check data types with the &#x60;Lang Utilities&#x60;">
                                        <a href="yui-isa.html">Check Data Types with &#x60;Lang&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Get information about the current user agent with &#x60;UA&#x60;">
                                        <a href="yui-ua.html">Browser Detection with &#x60;UA&#x60;</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Working with YUI 2 in 3">
                                        <a href="yui-yui2.html">Working with YUI 2 in 3</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Natively use YUI Gallery Modules">
                                        <a href="yui-gallery.html">Natively use YUI Gallery Modules</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
